<template>
  <div></div>
</template>
<script>
import plupload from "plupload";

export default {
  name: "missUyuan-plupload",
  // 上传对象配置信息
  props: {
    // 弹出文件选择对话框的DOM的id或对象
    browse_button: {
      type: [String, Object],
      required: true,
    },
    // 服务器端接收和处理上传文件的脚本地址
    url: {
      type: String,
      required: true,
    },
    /**
     * 限制上传文件的类型，大小等，例子：
     * filters: {
     *   mime_types : [ //只允许上传图片和zip文件
     *     { title : "Image files", extensions : "jpg,gif,png" },
     *     { title : "Zip files", extensions : "zip" }
     *   ],
     *   max_file_size : '400kb', //最大只能上传400kb的文件
     *   prevent_duplicates : true //不允许选取重复文件
     * }
     */
    filters: {
      type: Object,
      default() {
        return {};
      },
    },
    // 设置上传时的自定义头信息，以键/值对的形式传入。
    headers: {
      type: Object,
    },
    /**
     * 为true以multipart/form-data的形式来上传文件
     * 为false则以二进制的格式来上传文件。
     */
    multipart: {
      type: Boolean,
      default() {
        return true;
      },
    },
    /**
     * 上传时的附加参数，以键/值对的形式传入，例子:
     * multipart_params: {
     *   one: '1',
     *   two: '2',
     *   three: { //值还可以是一个字面量对象
     *     a: '4',
     *     b: '5'
     *   },
     *   four: ['6', '7', '8']  //也可以是一个数组
     * }
     */
    multipart_params: {
      type: Object,
    },
    // 当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试。
    max_retries: {
      type: Number,
      default() {
        return 0;
      },
    },
    /**
     * 分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。
     * 也可以使用一个带单位的字符串，如"200kb"。
     * 当该值为0时表示不使用分片上传功能。
     */
    chunk_size: {
      type: [Number, String],
      default() {
        return 0;
      },
    },
    /**
     * 使用该参数对将要上传的图片进行压缩，例子：
     * resize: {
     *   width: 100, // 指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度。
     *   height: 100, // 指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度。
     *   crop: true, //
     *   quality: 60, // 压缩后图片的质量，只对jpg格式的图片有效，默认为90。
     *   preserve_headers: false // 压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点。
     * }
     */
    resize: {
      type: Object,
    },
    // 指定了使用拖拽方式来选择上传文件时的拖拽区域，即可以把文件拖拽到这个区域的方式来选择文件。
    drop_element: {
      type: [String, Array, Object],
    },
    // 是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。
    multi_selection: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 可以使用该参数来设置你必须需要的一些功能特征，Plupload设置来选择合适的上传方式。
    required_features: {},
    // 当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
    unique_names: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 用来指定上传方式，指定多个上传方式请使用逗号隔开。
    runtimes: {
      type: String,
      default() {
        return "html5,flash,silverlight,html4";
      },
    },
    // 指定文件上传时文件域的名称，默认为file。
    file_data_name: {
      type: String,
      default() {
        return "file";
      },
    },
    // 用来指定Plupload所创建的html结构的父容器，默认为前面指定的browse_button的父元素。
    container: {
      type: [String, Object],
    },
    // flash上传组件的url地址。
    flash_swf_url: {
      type: String,
      default() {
        return "plupload/js/Moxie.swf";
      },
    },
    // silverlight上传组件的url地址。
    silverlight_xap_url: {
      type: String,
      default() {
        return "plupload/js/Moxie.xap";
      },
    },
  },
  emits: ["upload"],
  data() {
    return {
      uploader: {
        // Plupload实例id
        id: "",
        // 当前上传状态。
        state: 1,
        // 当前使用的上传方式
        runtime: {},
        // 当前的上传队列，是一个由上传队列中的文件对象组成的数组。
        files: [],
        // 当前的配置参数对象
        settings: {},
        // 表示总体进度信息的QueueProgress对象
        total: {},
      },
    };
  },
  // 一个组件选项，在组件被创建之前，props 被解析之后执行。
  setup() {},
  methods: {},
  // 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。
  beforeCreate() {},
  /**
   * 在实例创建完成后被立即同步调用。
   * 在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：
   *  数据侦听、计算属性、方法、事件/侦听器的回调函数。
   * 然而，挂载阶段还没开始，且 $el property 目前尚不可用。
   */
  created() {},
  // 在挂载开始之前被调用：相关的 render 函数首次被调用。
  beforeMount() {},
  /**
   * 在实例挂载完成后被调用，这时候传递给 app.mount 的元素已经被新创建的 vm.$el 替换了。
   * 如果根实例被挂载到了一个文档内的元素上，当 mounted 被调用时， vm.$el 也会在文档内。
   * 注意 mounted 不会保证所有的子组件也都被挂载完成。
   * 如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
   */
  mounted() {
    let that = this;
    const preInitMethod = {
      Init(up, info) {
        if (that.Init != null) {
          that.Init(up, info);
        }
      },
      UploadFile(up, file) {
        if (that.UploadFile != null) {
          that.UploadFile(up, file);
        }
      },
    };
    const initMethod = {
      PostInit() {
        if (that.PostInit != null) {
          that.PostInit();
        }
      },
      Browse(up) {
        if (that.Browse != null) {
          that.Browse(up);
        }
      },
      OptionChanged(up, name, value, oldValue) {
        if (that.OptionChanged != null) {
          that.OptionChanged(up, name, value, oldValue);
        }
      },
      Refresh(up) {
        if (that.Refresh != null) {
          that.Refresh(up);
        }
      },
      StateChanged(up) {
        if (that.StateChanged != null) {
          that.StateChanged(up);
        }
      },
      BeforeUpload(up, file) {
        if (that.BeforeUpload != null) {
          that.BeforeUpload(up, file);
        }
      },
      QueueChanged(up) {
        if (that.QueueChanged != null) {
          that.QueueChanged(up);
        }
      },
      UploadProgress(up, file) {
        if (that.UploadProgress != null) {
          that.UploadProgress(up, file);
        }
      },
      FilesRemoved(up, files) {
        if (that.FilesRemoved != null) {
          that.FilesRemoved(up, files);
        }
      },
      FileFiltered(up, file) {
        if (that.FileFiltered != null) {
          that.FileFiltered(up, file);
        }
      },
      FilesAdded(up, files) {
        if (that.FilesAdded != null) {
          that.FilesAdded(up, files);
        }
      },
      FileUploaded(up, file, info) {
        if (that.FileUploaded != null) {
          that.FileUploaded(up, file, info);
        }
      },
      ChunkUploaded(up, file, info) {
        if (that.ChunkUploaded != null) {
          that.ChunkUploaded(up, file, info);
        }
      },
      UploadComplete(up, files) {
        if (that.UploadComplete != null) {
          that.UploadComplete(up, files);
        }
      },
      Error(up, args) {
        if (that.Error != null) {
          that.Error(up, args);
        }
      },
      Destroy(up) {
        if (that.Destroy != null) {
          that.Destroy(up);
        }
      },
    };
    this.$props.preinit = preInitMethod;
    this.$props.init = initMethod;
    const uploader = new plupload.Uploader(this.$props);
    uploader.init();
    this.$data.uploader = uploader;
    this.$emit("upload", this.$data.uploader);
  },
};
</script>
<style>
</style>